<template>
    <div>
        <van-nav-bar
        title="下架"
        left-arrow
        @click-left="onClickLeft"
        />
    <van-tabs v-model:active="active">
  <van-tab title="演出">
    <show v-for="show in shows" :key="show.id" v-bind="show"></show>
  </van-tab>
  <van-tab title="周边">
    <merch v-for="merch in merchs" :key="merch.id" v-bind="merch"></merch>
  </van-tab>
  <van-tab title="众筹">
    <crowdfunding v-for="crowdfunding in crowdfundings" :key="crowdfunding.id" v-bind="crowdfunding"></crowdfunding>
  </van-tab>
  
</van-tabs>
    </div>
</template>

<script>
import { ref } from 'vue';
import show from '@/components/Xiashow.vue'
import merch from '@/components/Xiamerch.vue'
import crowdfunding from '@/components/Xiacrowdfunding.vue'
import axios from 'axios'
    export default {
        components: {
            show,merch,crowdfunding
        },
        setup() {
            const onClickLeft = () => history.back();
              const active = ref(0);
                return {
                    onClickLeft,
                    active 
            };
        },
        created(){
            axios.get("http://localhost:8087/shows/selectAll").then((res)=>{
                this.shows = res.data.data;
                console.log(this.shows);
            })
            axios.get("http://localhost:8087/merch/selectAll").then((res)=>{
                this.merchs = res.data.data;
                console.log(res.data.data);
            })
            axios.get("http://localhost:8087/crowdfunding/selectAll").then((res)=>{
                this.crowdfundings = res.data.data;
                console.log(res.data.data);
            })
        },
        data() {
            return {
            shows:[],
            merchs:[],
            crowdfundings: [],
            }
        },
    };

</script>

<style lang="scss" scoped>

</style>